<template>
  <el-container class="main_con">
    <div class="gift_body">
      <div class="left">
        <div class="app_div">
          <div class="app_main">
            <div class="div_bg">
              <div class="phone-title goods">
                <div class="phone-top">
                  <div class="custom-navbar" style="width:100%; height: 64px; background: rgb(255, 255, 255);">
                    <img
                      src=""
                      alt=""
                      style="width:100%; height: 20px; position: absolute; top: 0px; left: 0px; z-index: 100;"
                    />
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </div>
                <p class="page-title" style="color: rgb(33, 33, 33);">九宫格抽奖</p>
              </div>
              <vimage class="bg_img" v-if="form.other.prize_bg_img" :src="form.other.prize_bg_img"></vimage>
              <img class="bg_img" v-else src="@/assets/images/prize_bg.png" />
            </div>
            <div class="div_content" :style="'top:' + (form.other.box_top + 80) + 'px'">
              <div class="content_box">
                <div class="aaa">
                  <div class="bg_box"></div>
                  <vimage class="bg_imgr" :style="boxImg" v-if="form.other.prize_top_img" :src="form.other.prize_top_img"></vimage>
                  <img v-else :style="boxImg" class="bg_imgr" src="@/assets/images/prize_img.png" />
                </div>
                <div class="content_bg">
                  <div class="content_bg1">
                    <div class="content_bg2">
                      <div class="lottery">
                        <div class="lottery-item">
                          <div class="lottery-start">
                            <vimage v-if="form.other.prize_btn_img" :src="form.other.prize_btn_img" alt=""></vimage>
                            <img v-else src="@/assets/images/prize_btn.png" alt="" />
                          </div>
                          <ul>
                            <li v-for="(item, i) in form.config" :key="i" :class="i == 0 ? 'on' : ''">
                              <div class="box">
                                <div>
                                  <vimage :src="item.image" alt=""></vimage>
                                  <p :style="prizeColor">{{ item.name }}</p>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="content_txt">恭喜189***用户抽中50元现金红包</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-form ref="formRules" :model="form" label-width="130px" class="form_box" :rules="formRules">
          <el-tabs v-model="activeName">
            <el-tab-pane label="奖品设置" name="1">
              <div class="box_ove">
                <el-tabs type="border-card" tab-position="left" :stretch="false" v-model="prize_index">
                  <el-tab-pane v-for="(item, i) in form.config" :key="i">
                    <div slot="label" style="display: flex">
                      <span style="width: 70px; display: black; text-align: center">奖品{{ prize_name(i + 1) }}</span>
                      <span style="width: 30px; display: black; text-align: center">{{ item.probability }}%</span>
                    </div>
                    <el-form-item label="奖品选择" label-width="80px">
                      <el-radio-group v-model="item.type">
                        <el-radio :label="1">谢谢参与</el-radio>
                        <el-radio :label="2" v-if="is_deduction">积分</el-radio>
                        <el-radio :label="3">余额红包</el-radio>
                        <el-radio :label="4">商品</el-radio>
                        <el-radio :label="5" v-if="is_coupon">优惠券</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label-width="80px" :rules="formRules.prize_name" :prop="'config[' + i + '].name'">
                      <span slot="label">奖品名称</span>
                      <el-input :max="8" placeholder="请输入奖品名称" v-model="item.name" style="width: 200px" maxlength="12" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label-width="80px" :rules="formRules.image" :prop="'config[' + i + '].image'">
                      <span slot="label">奖品图片</span>
                      <div class="prize_img"><Upload :tempUrl="item.image" @input="getPrizeImg"></Upload></div>
                    </el-form-item>
                    <div v-if="item.type == 2">
                      <el-form-item label-width="80px">
                        <span slot="label">积分额</span>
                        <el-input-number v-model="item.value" :step="1" step-strictly :max="100" size="small" :min="0" :controls="false" style="width:100px"></el-input-number>
                        分
                      </el-form-item>
                    </div>
                    <div v-if="item.type == 3">
                      <el-form-item label-width="80px">
                        <span slot="label">红包金额</span>
                        <el-input-number v-model="item.value" :step="0.1" step-strictly :max="100" size="small" :min="0" :controls="false" style="width:100px"></el-input-number>
                        元
                      </el-form-item>
                    </div>
                    <div v-if="item.type == 4">
                      <el-form-item label-width="80px">
                        <span slot="label">商品</span>
                        <el-button @click="toSelectPro(i)">选择商品</el-button>
                        <el-table :data="item.valuelist" stripe style="width: 100%; margin-top: 15px">
                          <el-table-column prop="name" label="商品" width="180">
                            <template slot-scope="scope">
                              <div class="product-item">
                                <vimage :src="scope.row.master"></vimage>
                                <span>{{ scope.row.name }}</span>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column prop="original_price" label="销售价（元）" width="180"></el-table-column>
                          <el-table-column prop="sell_price" label="划线价（元）"></el-table-column>
                          <!-- <el-table-column prop="address" label="规格"></el-table-column> -->
                          <el-table-column prop="total" label="库存"></el-table-column>
                        </el-table>
                      </el-form-item>
                      <el-form-item label-width="80px" v-if="item.type !== 1" prop="number">
                        <span slot="label">库存</span>
                        <el-input-number v-model="item.limit" :step="1" size="small" :min="0" step-strictly></el-input-number>
                      </el-form-item>
                    </div>
                    <div v-if="item.type == 5">
                      <el-form-item label-width="80px">
                        <span slot="label">优惠券</span>
                        <el-button @click="toSelectCon(i)">添加</el-button>
                        <el-table :data="item.valuelist" stripe style="width: 100%; margin-top: 15px">
                          <el-table-column prop="name" label="优惠卷" width="180"></el-table-column>
                          <el-table-column prop="conditions" label="满" width="180"></el-table-column>
                          <el-table-column prop="denomination" label="减" width="180"></el-table-column>
                          <el-table-column prop="total_limit" label="库存"></el-table-column>
                        </el-table>
                      </el-form-item>
                    </div>
                    <el-form-item label-width="80px" v-if="item.type !== 1" prop="number">
                      <span slot="label">商品个数</span>
                      <el-input-number v-model="item.number" :step="1" size="small" :min="0" step-strictly></el-input-number>
                    </el-form-item>
                    <el-form-item label-width="80px">
                      <span slot="label">概率</span>
                      <el-input-number v-model="item.probability" :step="0.1" step-strictly :max="100" size="small" :min="0"></el-input-number>
                      %
                    </el-form-item>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="2">
              <div class="box_ove">
                <el-collapse v-model="activeName1">
                  <el-collapse-item title="背景样式" name="c1">
                    <el-form-item label-width="100px">
                      <span slot="label">抽奖页面背景</span>
                      <div class="prize_img"><Upload :tempUrl="form.other.prize_bg_img" @input="getPrizeBgImg"></Upload></div>
                    </el-form-item>
                  </el-collapse-item>
                  <el-collapse-item title="文字样式" name="c2">
                    <el-form-item label-width="100px">
                      <span slot="label">文字颜色</span>
                      <ColorPicker :color="form.other" :name="'btn_color'"></ColorPicker>
                    </el-form-item>
                  </el-collapse-item>
                  <el-collapse-item title="抽奖区样式" name="c3">
                    <el-form-item label-width="100px">
                      <span slot="label">抽奖区位置</span>
                      <div class="block"><el-slider v-model="form.other.box_top" :min="0" :max="600"></el-slider></div>
                    </el-form-item>
                    <el-form-item label-width="100px">
                      <span slot="label">区域装饰图片</span>
                      <div class="prize_img"><Upload :tempUrl="form.other.prize_top_img" @input="getPrizeTopImg"></Upload></div>
                    </el-form-item>
                    <el-form-item label-width="100px">
                      <span slot="label">图片位置</span>
                      <div class="block"><el-slider v-model="form.other.box_img" :min="-50" :max="100"></el-slider></div>
                    </el-form-item>
                  </el-collapse-item>
                  <el-collapse-item title="按钮样式" name="c4">
                    <el-form-item label-width="100px">
                      <span slot="label">按钮样式</span>
                      <div class="prize_img"><Upload :tempUrl="form.other.prize_btn_img" @input="getPrizeBtnImg"></Upload></div>
                    </el-form-item>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>
            <el-tab-pane label="活动规则" name="3">
              <div class="box_ove">
                <el-form-item label-width="80px">
                  <span slot="label">活动规则</span>
                  <!--   <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入规则说明"
                    v-model="form.other.text"
                    style="margin-top: 10px"
                  ></el-input> -->
                  <tinymce v-model="form.other.text" :height="400" />
                </el-form-item>
              </div>
            </el-tab-pane>
            <el-tab-pane label="基本设置" name="4">
              <div class="box_ove">
                <el-form-item label-width="110px" prop="name">
                  <span slot="label">抽奖活动名称</span>
                  <el-input type="text" placeholder="请输入内容" v-model="form.name" maxlength="10" show-word-limit style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖时间</span>
                  <el-date-picker
                    v-model="prize_time"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['12:00:00']"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                    <!--:picker-options="pickerOptionsStart"-->
                  </el-date-picker>
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖规则</span>
                  <el-radio-group v-model="form.type">
                    <el-radio :label="1">一天次数</el-radio>
                    <el-radio :label="2">一人次数</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖上限次数</span>
                  <el-input-number v-model="form.limit" :step="1" step-strictly size="small" :min="0"></el-input-number>
                  次
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖初始次数</span>
                  <el-input-number v-model="form.number" :step="1" step-strictly size="small" :min="0"></el-input-number>
                  次
                </el-form-item>
                <el-form-item label-width="110px">
                  <span slot="label">抽奖消耗积分</span>
                  <el-input-number v-model="form.integral" :step="1" step-strictly size="small" :min="0"></el-input-number>
                  分
                </el-form-item>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <div class="form_button">
          <el-button @click="addPrize" type='primary'  size="medium">保存数据</el-button>
          <!-- <el-button>重置</el-button> -->
        </div>
      </div>
    </div>
    <el-dialog title="选择商品" :visible.sync="showSelectPro" width="50%" append-to-body>
      <SelectProduct ref="selectproduct" :key="rk" :data="selectPro" :limit="1" @outData="closePro"></SelectProduct>
    </el-dialog>
    <el-dialog title="选择优惠券" :visible.sync="showSelectCon" width="50%" append-to-body>
      <SelectConpon ref="selectCon" :key="rke" :data="selectCon" @outData="closeCon"></SelectConpon>
    </el-dialog>
  </el-container>
</template>

<script>
import {addLottery, getLotteryContent, editLotteryContent} from '@/api/mall/prize';
import {getLotteryConfig} from '@/api/mall/setting';
import Upload from '@/components/Upload/SingleImage2';
import SelectProduct from '@/components/SelectProduct/index';
import SelectConpon from '@/components/SelectConpon/index';
import ColorPicker from '@/components/ColorPicker/index';
import Tinymce from '@/components/Tinymce';
import {jur_addons_item, jur_addons} from '@/utils/jurisdiction';
export default {
  data() {
    var changeInput = (rule, value, callback) => {
      let pattern = /^[1-9][0-9]*$/; // 正整数的正则表达式
      // 不符合正整数时
      console.log(rule, value);
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        callback(new Error('请输入正整数'));
      } else {
        callback();
      }
    };
    return {
      activeName1: ['c1', 'c2', 'c3', 'c4'],
      prize_index: '0',
      prize_time: '',
      id: '',
      form: {
        config: [
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          },
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          },
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          },
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          },
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          },
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          },
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          },
          {
            name: '',
            image: '',
            probability: 5,
            type: 1,
            value: '',
            valuelist: [],
            number: 1,
            limit: 0
          }
        ],
        type: 1,
        start_time: '',
        end_time: '',
        integral: 10,
        limit: 10,
        number: 1,
        name: '',
        style: 1,

        other: {
          text: '',
          prize_bg_img: '',
          prize_top_img: '',
          prize_btn_img: '',
          btn_color: '#000',
          box_img: -20,
          box_top: 300
        }
      },
      formRules: {
        name: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }
        ],
        prize_name: [
          {
            required: true,
            message: '请输入奖品名称',
            trigger: 'blur'
          }
        ],
        image: [
          {
            required: true,
            message: '请上传奖品图片',
            trigger: 'blur'
          }
        ]
      },
      valueRules: {validator: changeInput, trigger: 'blur'},
      numberRules: {validator: changeInput, trigger: 'blur'},

      showSelectPro: false,
      showSelectCon: false,
      selectPro: [],
      selectCon: [],
      activeName: '1',
      rk: 0,
      rke: 0,
      data: [],

      setting: {},
      is_coupon: false,
      is_deduction: false
    };
  },
  created() {
    // this.getConfig();
    jur_addons([7, 3]).then(res => {
      if (res[3]) {
        this.is_coupon = true;
      }

      if (res[7]) {
        this.is_deduction = true;
      }
    });
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getLottery(this.id);
    }
  },

  components: {
    Upload,
    SelectProduct,
    SelectConpon,
    ColorPicker,
    Tinymce
  },
  computed: {
    prizeColor() {
      return 'color:' + this.form.other.btn_color + ';';
    },

    boxImg() {
      return 'bottom:' + this.form.other.box_img + 'px;';
    },
    prize_name() {
      return function(num) {
        var arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九');
        var arr2 = new Array('', '十', '百'); //可继续追加更高位转换值
        if (!num || isNaN(num)) {
          return '零';
        }
        var english = num.toString().split('');
        var result = '';
        for (var i = 0; i < english.length; i++) {
          var des_i = english.length - 1 - i; //倒序排列设值
          result = arr2[i] + result;
          var arr1_index = english[des_i];
          result = arr1[arr1_index] + result;
        }
        //移除末尾的零
        result = result.replace(/零+$/, '');
        result = result.replace(/^一十/g, '十');
        return result;
      };
    }
  },
  methods: {

    // 添加抽奖 && 修改
    addPrize() {
      let _this = this;
      this.$refs['formRules'].validate(valid => {
        if (valid) {
          _this.save();
        }
      });
    },
    save() {
      this.form.start_time = this.prize_time[0];
      this.form.end_time = this.prize_time[1];
      this.form.config.forEach(item => {
        if (item.type == 4) {
          item.value = {
            commodity_id: item.valuelist[0].id
          };
        }
        if (item.type == 5) {
          item.value = {
            coupon_id: item.valuelist[0].id
          };
        }
      });
      let data = {
        ...this.form
      };
      console.log(data);
      if (this.id) {
        editLotteryContent(data).then(res => {
          this.$message.success('修改成功');
          this.$router.push({
            path: '/grid/list'
          });
        });
      } else {
        addLottery(data).then(res => {
          this.$message.success('创建成功');
          this.$router.push({
            path: '/grid/list'
          });
        });
      }
    },
    // 获取
    getLottery(id) {
      let data = {id};
      getLotteryContent(data).then(res => {
        this.form = res.msg;
        this.prize_time = [];
        this.prize_time.push(this.form.start_time);
        this.prize_time.push(this.form.end_time);
        console.log(res);
      });
    },
    // 获取 配置
    getConfig() {
      getLotteryConfig().then(res => {
        this.setting = res.msg.configuration;
        console.log(res);
      });
    },
    // 图片上传
    getPrizeImg(data) {
      this.form.config[this.prize_index].image = data;
    },
    getPrizeBgImg(data) {
      this.form.other.prize_bg_img = data;
    },
    getPrizeTopImg(data) {
      this.form.other.prize_top_img = data;
    },
    getPrizeBtnImg(data) {
      this.form.other.prize_btn_img = data;
    },
    //关闭选择产品框
    closePro(data) {
      if (data) {
        this.form.config[this.prize_index].valuelist = data;
      }
      this.showSelectPro = false;
    },
    toSelectPro(i){
      if(this.form.config[i].valuelist){
         this.selectPro=this.form.config[i].valuelist
      }else{
         this.selectPro=[]
      }

      this.showSelectPro=true
      this.$nextTick(()=>{
        this.$refs.selectproduct.initdata()
      })
    },
    toSelectCon(i){
      if(this.form.config[i].valuelist){
         this.selectCon=this.form.config[i].valuelist
      }else{
         this.selectCon=[]
      }
      this.showSelectCon=true
      this.$nextTick(()=>{
        this.$refs.selectCon.init()
      })
    },
    //关闭选择优惠券框
    closeCon(data) {
		if(data){
			this.form.config[this.prize_index].valuelist = data;

		}
      this.showSelectCon = false;
      console.log(data);
    }

  }
};
</script>
<style lang="scss" scoped>
.main_con {
  height: 100%;
  .gift_body {
    background-color: #ffffff;
    padding: 20px 30px;
    display: flex;
    height: 100%;
    .box {
      margin-top: 10px;
      background-color: #f4f6f8;
      border-radius: 2px;
      font-size: 14px;
      line-height: 20px;
      color: #262b30;
    }
    .right {
      flex: 1;
      margin-left: 30px;
      padding: 20px;
      border-radius: 15px;
      box-sizing: border-box;
      box-shadow: 0px 5px 10px #e8e8e8;
      overflow: auto;
      height: 100%;
      .form_box {
        /deep/.el-tabs--left .el-tabs__header.is-left {
          height: calc(100vh - 130px - 80px - 150px);
        }
        .prize_img {
          width: 120px;
          height: 120px;
        }
        .block {
          width: 400px;
        }
        .box_ove {
          height: calc(100vh - 130px - 80px - 152px);
          overflow: auto;
        }
      }
      .form_button {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 15px;
      }
    }
    .left {
      .app_div {
        width: 410px;
        height: 785px;
        padding: 62px 28px 90px 27px;
        position: relative;
        background: url('~@/assets/images/ipbg.png') no-repeat;
        background-size: 100%;
        overflow: hidden;
        .app_main {
          overflow: scroll;
          height: 100%;
          z-index: 2;
          position: relative;
          background: #fff;
          &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
        .div_bg {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .phone-title {
            height: 64px;
            background: #fff;
            background-size: 100% auto;
            text-align: center;
            cursor: pointer;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
            width: 100%;
            &.pageInfo {
              box-shadow: 0 0 2px 0 #2d8cf0;
              z-index: 1000;
              position: relative;
            }
            .page-title {
              position: absolute;
              z-index: 100;
              font-family: PingFang SC;
              font-style: normal;
              font-weight: 600;
              font-size: 18px;
              line-height: 25px;
              display: flex;
              align-items: center;
              text-align: center;
              color: #212121;
              left: 50%;
              transform: translate(-50%, 0);
              bottom: 10px;
              margin: 0;
            }

            .phone-top {
              display: flex;
              flex-direction: column;
              width: 100%;
              overflow: hidden;

              .custom-navbar img {
                position: absolute;
                right: 7px;
                width: 87px;
                height: 32px;
                bottom: 6px;
              }
            }
          }
          .bg_img {
            width: 100%;
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .div_content {
          width: 100%;
          // height: 100%;
          position: relative;
          z-index: 2;
          .content_box {
            width: 290px;
            // margin-top: 300px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
            .content_bg {
              width: 100%;
              height: 280px;
              background-image: linear-gradient(#ff9c6b, #ff5c4a);
              border-radius: 15px;
              box-sizing: border-box;
              padding: 10px 11px 38px;
              box-shadow: 0px 3px 0px #d72b27 inset;
              border-left: solid 2px rgba(255, 255, 255, 0.4);
              border-right: solid 2px rgba(255, 255, 255, 0.4);
              .content_txt {
                font-size: 12px;
                text-align: center;
                color: #fff;
              }
              .content_bg1 {
                width: 100%;
                height: 100%;
                background: #ff4631;
                border-radius: 15px;
                box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 5px;
                padding: 10px;
                .content_bg2 {
                  width: 100%;
                  height: 100%;
                  background: #d62e1e;
                  border-radius: 15px;
                  box-shadow: #d02a1b 0px -3px 5px;
                  .lottery-box {
                    overflow: hidden;
                  }
                  .lottery {
                    width: 100%;
                    height: 100%;
                  }
                  .lottery .lottery-item {
                    height: 100%;
                    position: relative;
                  }

                  .lottery .lottery-item ul li {
                    width: 30%;
                    height: 30%;
                    position: absolute;
                    margin: 5px;
                    list-style-type: none;
                  }

                  .lottery .lottery-item ul li:nth-child(2) {
                    left: 33%;
                  }

                  .lottery .lottery-item ul li:nth-child(3) {
                    left: 66%;
                  }

                  .lottery .lottery-item ul li:nth-child(4) {
                    left: 66%;
                    top: 32%;
                  }

                  .lottery .lottery-item ul li:nth-child(5) {
                    left: 66%;
                    top: 64%;
                  }

                  .lottery .lottery-item ul li:nth-child(6) {
                    left: 33%;
                    top: 64%;
                  }

                  .lottery .lottery-item ul li:nth-child(7) {
                    left: 0;
                    top: 64%;
                  }

                  .lottery .lottery-item ul li:nth-child(8) {
                    left: 0;
                    top: 32%;
                  }

                  .lottery .lottery-item ul li .box {
                    height: 100%;
                    position: relative;
                    text-align: center;
                    background-color: #fff;
                    box-shadow: 0px -7px 0px #ffcacb inset;
                    border-radius: 12px;
                    overflow: hidden;
                    margin: 0;
                    padding: 5px;
                    p {
                      font-size: 12px;
                      margin-top: 4px;
                      text-align: center;
                      line-height: 10px;
                    }
                  }

                  .lottery .lottery-item ul li .box img {
                    display: block;
                    height: 30px;
                    margin: 0 auto;
                  }

                  .lottery .lottery-item ul li.on .box {
                    border: #ffb000 solid 2px;
                    border-bottom: none;
                    box-shadow: 0px -7px 0px #ffb000 inset;
                  }

                  .lottery .lottery-item .lottery-start {
                    position: absolute;
                    width: 30%;
                    height: 30%;
                    margin: 5px;
                    left: 48%;
                    top: 48%;
                    transform: translate(-50%, -50%);
                    img {
                      width: 100%;
                      display: block;
                    }
                  }
                }
              }
            }
            .bg_box {
              width: 72%;
              margin: auto;
              height: 30px;
              background: #f9604f;
              border: #fa5542 solid 3px;
              display: block;
              position: relative;
              top: -28px;
              z-index: -1;
              font-size: 30px;
              border-radius: 5px;
              transform: perspective(0.6em) rotateX(20deg);
            }
            .bg_imgr {
              position: absolute;
              z-index: 9;
              width: 100%;
              bottom: 0px;
            }
          }
        }
      }
    }
  }
}
.product-item {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
.aaa {
  position: relative;
  height: 1px;
}
</style>
